<template>
  <div class="frontContainer">
    <div class="lt ">
      <h5>侧边按钮</h5>
      <ul class="f_btns">
        <li v-for="(btn,index) in btns" :class="[{'active':i == index}]">
          <i></i> <em>{{ btn.name }}</em>
        </li>
      </ul>
    </div>
    <div class="md">
      <h5>高亮主按钮</h5>
      <div class="block">
        战斗
      </div>
    </div>
    <div class="rt">
      <h5>组按钮</h5>
      <ul class="btns">
        <li v-for="(btn,index) in btns" :class="[{'active':i == index}]">
          <i></i> <em>{{ btn.name }}</em>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      i:1,
      btns: [
        {name: '编队'},
        {name: '招募'},
        {name: '培养'},
        {name: '采购'},
      ]
    }
  },
  methods: {
    toggle() {
      this.state = !this.state;
    }
  }
}
</script>

<style scoped lang="scss">
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

em {
  //font-style: normal
}

.frontContainer {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background-color: #6DC1FF;
  padding: 10px;

  .lt, .md {
    width: 33%;
    float: left;
  }

  .rt {
    width: 33%;
    float: right;
  }

  .btns {
    width: 50%;
    padding: 10px;
    overflow: hidden;
    display: block;
    margin: 0 auto;

    li {
      width: 48%;
      margin-right: 1%;
      float: left;
      color: #fff;
      border-top: 1px solid #fff;
      margin-bottom: 5px;
      cursor: pointer;
      transform:skew(-5deg,0deg);
      i {
        width: 6px;
        height: 50px;
        background-color: #fff;
        float: left;
      }
      em {
        float: left;
        font-size: 20px;
        text-align: center;
        padding-left: 20px;
        line-height: 50px;
        font-weight: bold;
      }
      &.active {
        color: #f9c57d;
        i {
          background-color: #f9c57d;
        }
        em {
          color: #f9c57d!important;
        }
      }
    }
  }
  .f_btns {
    width: 50%;
    padding: 10px;
    overflow: hidden;
    display: block;
    margin: 0 auto;

    li {
      width: 48%;
      margin-right: 1%;
      float: left;
      color: #fff;
      margin-bottom: 5px;
      background-color: rgba(255,255,255,0.3);
      cursor: pointer;
      i {
        width: 6px;
        height: 50px;
        background-color: #fff;
        float: left;
      }
      em {
        float: left;
        font-size: 20px;
        text-align: center;
        padding-left: 20px;
        line-height: 50px;
        font-weight: bold;
        font-style: normal;
      }
      &.active {
        color: #f9c57d;
        background-color: rgba(249, 197, 125, 0.35);
        i {
          background-color: #f9c57d;
        }
        em {
          color: #f9c57d!important;
        }
      }
    }
  }
}

.block{
  width: 120px;
  height: 60px;
  background: #f9c57d;
  position: relative;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  font-size: 30px;
  font-style: italic;
  cursor: pointer;
  color: #fff;
  &::before{
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    width: 0;
    height: 0;
    border: 5px solid #6DC1FF;
    border-top-color: transparent;
    border-left-color: transparent;
  }
  &:hover {
    padding: 0;
    color: #f9c57d;
    background: #fff;
  }

  //&::after{
  //  position: absolute;
  //  left: 0;
  //  top: 0;
  //  content: '';
  //  width: 0;
  //  height: 0;
  //  border: 5px solid #6b00d8;
  //  border-bottom-color: transparent;
  //  border-right-color: transparent;
  //}

}

</style>